<template>
    <div class="page">
        <div class="bgc"></div>
        <div class="content">
           <div class="content-title">移门管家登录</div>
           <div class="input-box">
               <i class="i">&#xe600;</i>
               <div class="input-wapper">
                    <input class="input" type="text" placeholder="登录账号" title="请输入账号">
               </div>
               <div class="title">请输入密码</div>
           </div>
           <div class="input-box">
               <i class="i">&#xe836;</i>
               <div class="input-wapper">
                    <input class="input" type="password" placeholder="登录密码" title="请输入账号">
               </div>
               <div class="title">请输入账号</div>
           </div>
           <div class="reg-box">
               <router-link to="" class="reg-item">忘记密码？</router-link>
               <router-link :to="{name:'reg'}" class="reg-item">注册</router-link>
           </div>
           <button @click="show" class="btn">立即登录</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            a:""
        }
    },
    methods:{
        show(){
            // this.$message.error('密码错误');
            this.$message({
                message: '登录成功',
                type: 'success'
            });
            this.$router.push({name:"home"})
        }
    }
}
</script>
<style scoped>
.page{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    min-height: 100%;
}
.content{
    height: 250px;
    border-radius: 20px;
    margin-bottom: 250px;
    max-width: 80%;
}
.content-title{
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    font-weight: bold;
    color: #FFF;
}
.input-box{
    text-shadow: #000 0.1em 0.1em 0.1em;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3) inset;
    color: #FFF;
    padding: 10px;
    border-radius: 5px;
    background-color:rgba(0,0,0,.1);
    display: flex;
    margin: 25px 0;
}
.input-wapper{
    flex: 1;
}
.input{
    background-color: rgba(0,0,0,0);
    border: none;
    color: #FFF;
    margin: 0 10px;
    outline:none;
    width: 100%;
    font-size: 15px;
    text-shadow: #000 0.1em 0.1em 0.1em;
    box-sizing: border-box;
}
.input::placeholder{
    color: #FFF;
    text-shadow: #000 0.1em 0.1em 0.1em;
    font-size: 15px;
}
.title{
    color: rgb(238, 234, 12);
    font-size: 14px;
    white-space: nowrap;
}
.btn{
    width: 100%;
    height: 40px;
    font-weight: bold;
    border-radius: 5px;
    outline:none;
    border: none;
}
.reg-box{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    /* margin-top: -20px; */
    margin-bottom: 30px;
    font-size: 14px;
}
.reg-item{
    color: #FFF;
}
</style>